import React, { FC, useState, DragEvent } from 'react'
import classNames from 'classnames'
import './_style.scss'

interface DraggerProps {
    onFile: (files: FileList) => void
}

const Dragger: FC<DraggerProps> = (props) => {
    // props
    const { onFile, children } = props
    // data 
    const [dragOver, setDragOver] = useState(false)

    // other 
    const classes = classNames('viking-uploader-dragger', {
        'is-dragover': dragOver
    })
    // 拖拽 进入和离开时触发的钩子 自带--- 布尔决定显示效果
    const handleDrag = (e: DragEvent<HTMLElement>, over: boolean) => {
        e.preventDefault()
        setDragOver(over)
    }
    // 拖拽东西进去时 
    const handleDrop = (e: DragEvent<HTMLElement>) => {
        e.preventDefault()
        setDragOver(false)
        onFile(e.dataTransfer.files)
    }

    return (
        <div
            className={classes}
            onDragOver={e => { handleDrag(e, true) }}
            onDragLeave={e => { handleDrag(e, false) }}
            onDrop={handleDrop}>
            {children}
        </div>
    )
}


export default Dragger